<template>
    <div class="demo">
        <h2 >学生姓名:{{name}}</h2>
        <h2>学生性别:{{sex}}</h2>
        <h2>当前求和为: {{ number }}</h2>
        <button @click="add">add</button>
        <button @click="sendStudentName">点我返回学生名字</button>
        <button @click="unbind">解绑事件</button>
        <button @click="death">销毁当前stedent的实例对象</button>
    </div>
</template>
<script>
export default {
    name: 'StuStudent',
    data () {
        return {
            name: '222223123',
            sex: '男',
            number: 0,
        }
    },
    methods: {
        sendStudentName () {
            // 触发student组件实例身上的atguigu事件
            this.$emit('atguigu', this.name)
            this.$emit('demo')
        },
        unbind () {
            this.$off('atguigu') // 解绑一个自定义事件
            this.$off(['atguigu', 'demo']) //解绑多个自定义事件
            this.$off() // 解绑全部自定义事件
        },
        death () {
            this.$destroy() //销毁了当前stdent组件实例，销毁后所有student实例的自定义事件全都不奏效了
        },
        add () {
            console.log('add被调用了')
            this.number++
        }
    }

}
</script>
<style scoped>
    .demo {
        background-color: red;
        padding: 5px;
        margin-top: 30px;
    }
</style>